<template>
  <li style="width: 101%" class="cjy-translate aui-list-item "
      :class="{moveleft:showDele , 'cjy-regular-group-up':index != 0 && false,'cjy-regular-group-down':false && hasRegular}"
      @touchstart="" @touchend="">
    <tap-slider @sliderLeft="showDelButton" @sliderRight="heiddenDelButton">
      <div class="aui-media-list-item-inner cjy-outer-item">
        <div class="aui-media-list-item-inner line-normal-wrapper" style="padding-left:6rem">
          <div class="good_check" style="position:absolute;left: 0;">
            <label>
              <input class="aui-checkbox" type="checkbox" v-model="isChecked">
            </label>
            <div style="z-index: 3 ;position: absolute;width:100%;top:0.1rem;left:-0.3rem ;height:2rem"
                 @click.stop="changeChecked"></div>
          </div>

          <div class="aui-list-item-media" style="width:4.3rem;height:4.3rem ;position:absolute;left: 1.5rem;"
               @click.stop="goDetail()">
            <img v-lazy="detail.mainPic">
            <div v-if="isStockCountOver"
                 style="position: absolute;bottom:0;width: 100%;background:  rgba(68,68,68,0.7);left: 0;color: white;font-size: 0.6rem">
              仅剩{{stockCount + goodsUnit}}
            </div>
          </div>

          <div class="aui-list-item-inner suggest cjy-text-cart " @click.stop="goDetail()">
            <h3 class="cjy-text-overflow" style="height: 1.9rem; position: relative">
              {{goodsName}}
            </h3>
            <p>
              {{ !goodsSpec?"":'规格：'}}{{goodsSpec || '&nbsp;'}}&nbsp;
            </p>

            <p v-if="distributionprocessingtime">
              <i class="icon njfont nj-dengdai" style="padding:0;font-size: 0.7rem;float:none;margin: 0"></i>
              准备{{distributionprocessingtime}}分钟
            </p>
            <p v-if="processingattribute">
              加工服务：<span style="color:#1E1E1E">{{processingattribute}}</span>
            </p>
            <span class="delivery_time"
                  style=" border-radius:2px;color: #9a9a9a;  border:0.5px solid #9a9a9a;font-size: 0.55rem;padding:0 0.1rem;"
                  v-if="goodsDeliveryType">
              明日送达
            </span>

            <p style="
              display: flex;
              flex-direction: column;
              justify-content:center;
              min-height: 1.5rem"
               v-if="goodsType != 6">
              <del style="display:inline-block;" v-if="normalPrice">¥ {{translatePrice(normalPrice)}}
              </del>
              <span style="display:inline-block;">¥<em>{{translatePrice(showPrice)}}</em></span>
            </p>

            <p style=" display: flex;flex-direction: column;justify-content:center;min-height: 1.5rem"
               v-if="goodsType == 6">
              <del style="display: inline-block" v-if="normalPrice">
                ¥{{translatePrice(normalPrice* weighingBig)}}
              </del>
              <span style="display:inline-block;">¥<em>{{translatePrice(showPrice * weighingBig)}}</em></span>
            </p>

            <p v-if="eachSingle"
               style="text-align:left;color:#0C0D0C;font-size: .6rem">
                <span style="display:inline-block;line-height: 0.7rem">
                    <span
                      style="font-size:0.55rem;color:#4B403E;background: #EEF8E7;display: inline-block;line-height: 0.8rem">
                       限量{{eachSingle}}{{goodsType == 6 || goodsType == 7 ? 'kg':'件'}},超出原价购买
                    </span>
                </span>
            </p>
            <div style="position: absolute;bottom:0;right:0;width:10rem;height:3rem; " @click.stop>
              <div style="position: absolute;bottom:1.2rem;right: 1rem">
                <!--pageName="cart"-->
                <update-cart :addCartButtonType="4"
                             :isCheck="isChecked"
                             :commodityInfor="detail"
                             pageName="cart"
                             :goodsId="goodsId"
                             ref="updataCart">
                </update-cart>
              </div>
            </div>
          </div>
        </div>
        <div class="operations_list3" @click.stop="deleFromCart">
          <i class="icon njfont nj-shanchu"> </i>
          <p> 删除 </p>
        </div>
      </div>
    </tap-slider>

  </li>
</template>

<script>
  import UpdateCart from '../UpdateCart'
  import {MessageBox} from '@/ui-components'
  import TapSlider from '@/components/TapSlider'
  import {translatePrice} from '@/utils/TranslatePriceC'

  export default {
    data() {
      return {
        isChecked: true,
        featureLabelList: null, // 类名查询表
        featureClass: '',//特色标签css类名
        goodsCode: "",  //产品分类
        enterpriseName: "宁家",  // 商家名称
        goodsId: "",   //产品ID
        goodsName: "", //产品名称
        goodsPrice: "", //产品价格
        goodsUnit: "", //产品单位
        city: "", //产地
        shopName: "", //商店名称
        stockCount: "", //库存
        goodsModel: "", // 商品型号
        goodsType: 0, //售价
        normalPrice: 0, //原价
        mainPic: null, //主图缩略图
        featureLabel: "进口", //特色标签
        goodsSpec: '', //规格
        rid: '',
        goodsNum: '0',
        showWsPrice: 0,
        showNormalPrice: 0,
        showUnit: '',
        processingattribute: '',
        weighingBig: 1,
        distributionprocessingtime: 0,
        workingPrice: 0,
        weightType: 7,
        eachPrice: 0,
        isStockCountOver: false,
        lastStockCountNum: 0,
        goodsDeliveryType: '',

      }
    },
    created() {
      this.isChecked = this.isCheck
      this.initData()
    },
    components: {
      UpdateCart,
      TapSlider
    },
    props: {
      detail: {
        type: Object,
        default: () => {
          return {}
        }
      },
      showDele: {
        type: Boolean,
        default: false
      }
      ,
      isCheck: {
        type: Boolean,
        default: false
      }
      ,
      index: 0,
      hasRegular: {
        type: Boolean,
        default: true
      },
      prodVoList: {
        type: Array,
        default: () => []
      },
      prodVo: {
        type: Object,
        default: () => null
      },
      workingInfo: {
        type: String,
        default: ''
      },
    }
    ,
    watch: {
      isCheck(data) {
        this.isChecked = data
      }
      ,
      detail() {
        this.initData()
      }
    }
    ,
    computed: {
      promTotalPrice() {
        var num = this.goodsNum
        var price = this.goodsPrice
        var prodVo = this.prodVo
        if (this.prodVo) {
          return prodVo.promTotalPrice
        }
        var total = num * parseFloat(price)

        return total
      },

      showPrice() {
        var prodVoList = this.prodVoList
        var goodsCode = this.goodsCode
        var showPrice = this.goodsPrice
        var prodVo
        var detail = this.detail
        var isOverNumber = false
        if (prodVoList.length > 0 && goodsCode) {
          prodVo = prodVoList.find((item) => {
              return item.goodsCode == goodsCode
            }
          )
        }
        if (prodVo && !isOverNumber) {
          if (prodVo.promSpecPrice || prodVo.killPrice) {
            showPrice = prodVo.killPrice || prodVo.promSpecPrice
            this.normalPrice = prodVo.price
          }
        }
        return parseFloat(showPrice)
      },
      eachSingle() {
        var eachSingle = null
        var prodVoList = this.prodVoList
        var goodsCode = this.goodsCode
        var prodVo
        if (prodVoList.length > 0 && goodsCode) {
          prodVo = prodVoList.find((item) => {
              return item.goodsCode == goodsCode
            }
          )
        }
        prodVo && prodVo.promotionalVoList && prodVo.promotionalVoList.map((item) => {
          if ((item.saleType === 'specialOffer' || item.saleType === 'discount' || item.saleType === 'seckill') && item.eachSingle) {

            if (eachSingle !== null) {
              eachSingle = Math.min(item.eachSingle, eachSingle)
            } else {
              eachSingle = item.eachSingle
            }
          }
        })
        return eachSingle
      }

    }
    ,
    methods: {
      deleFromCart() {
        MessageBox.confirm('删除商品', {title: "删除商品", message: "是否从购物车中移除该商品", cancelButtonText: '再看看'}).then(
          (res) => {
            this.$refs.updataCart.deleFromCart()
          }
        )

        this.$emit('heiddenDelButton', this.index)
      }
      ,
      goDetail(item) {
        this.$router.push({path: 'detail', query: {code: this.goodsCode}})
      }
      ,
      changeChecked() {
        this.isChecked = !this.isChecked

        var data = this.isChecked
        var config = {
          isChecked: data,
          goodsId: this.goodsId,
        }
        setTimeout(() => {
          this.$emit('itemOnChecked', config)
          this.$refs.updataCart.preOrderUpdata()
        }, 20)
      }
      ,
      allClick() {
        this.$refs.updataCart.updataCart()
      }
      ,
      showDelButton() {
        this.$emit('showDelButton', this.index)
      }
      ,
      heiddenDelButton() {
        this.$emit('heiddenDelButton', this.index)
      },
      initData() {
        var detail = this.detail
        var workingInfo = this.workingInfo ? JSON.parse(this.workingInfo) : ''
        var workingPrice = workingInfo ? workingInfo.procemoney : 0
        this.showUnit = detail.showUnit
        this.showWsPrice = detail.showWsPrice
        this.showNormalPrice = detail.showNormalPrice
        this.goodsCode = detail.goodsCode//产品分类
        this.goodsNum = detail.goodsNum || 0
        this.enterpriseName = detail.enterpriseName// 商家名称
        this.goodsId = parseInt(detail.goodsId) //产品ID
        this.goodsName = detail.goodsName//产品名称
        this.goodsPrice = detail.goodsPrice || 0//产品价格
        this.goodsUnit = detail.goodsUnit//产品单位
        this.city = detail.city//产地
        this.shopName = detail.shopName//商店名称
        this.stockCount = detail.stockCount//库存
        this.goodsModel = detail.goodsModel// 商品型号
        this.goodsType = detail.goodsType//售价
        this.normalPrice = detail.normalPrice//原价
        this.mainPic = detail.mainPic  //主图缩略图
        this.featureLabel = detail.featureLabel//特色标签
        this.weightType = detail.weightType
        this.distributionprocessingtime = detail.distributionprocessingtime
        this.lastStockCountNum = detail.lastStockCountNum
        this.isStockCountOver = detail.isStockCountOver
        this.goodsSpec = detail.goodsSpec // 规格
        this.eachPrice = detail.eachPrice
        this.weighingBig = detail.weighingBig
        this.processingattribute = workingInfo ? workingInfo.processingattribute : ''
        this.goodsDeliveryType = detail.goodsDeliveryType

        if (this.goodsType == 7 || this.goodsType == 6) {
          this.workingPrice = parseFloat(workingPrice)
        } else {
          this.workingPrice = parseFloat(workingPrice * this.goodsNum)
        }
      },

      translatePrice(showPrice) {
        var goodsUnit = this.goodsUnit.toLowerCase()
        var goodsType = this.goodsType
        if (goodsType == 7) {
          showPrice = 0.5 * showPrice
        }
//        if (goodsUnit == 'kg') {
//          showPrice = 0.5 * showPrice
//        } else if (goodsUnit == 'g') {
//          showPrice = 0.002 * showPrice
//        }
        return this.translatePriceNo(showPrice)

      },
      translatePriceNo: translatePrice
    }
    ,

  }
</script>

<style scoped="">
  .cjy-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }

  .cjy-outer-item {
    width: 100%;
    min-height: 5.5rem;
  }

  .line-normal-wrapper {
    width: 100%;
    position: relative;
  }

  .cjy-text-cart {
    position: relative !important;
    width: 100%;
    right: 0;
    text-align: left;
  }

  .operations_list3 {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    transform: translatex(100%)
  }

  .moveleft {
    transform: translatex(-3.5rem);
  }

  .cjy-translate {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }

  .cjy-regular-group-up::before {
    content: '';
    position: absolute;
    height: 2.1rem;
    top: 0;
    left: 1.2rem;
    width: 0;
    border-left: thin dashed gold;
  }

  .cjy-regular-group-down::after {
    content: '';
    position: absolute;
    height: 2.1rem;
    bottom: 0;
    left: 1.2rem;
    width: 0;
    border-left: thin dashed gold;
  }

  .cjy-preferential {
    width: 100%;
    padding-right: 1rem;
    padding-bottom: 0.2rem;
  }
</style>

<style>
</style>
